<!-- 第一天----------------

 1. 将登录页面的第一个输入框所关联的字段全部 更改 mobile
 2. 完善了登录表单的校验规则
 3. 为登录按钮绑定了点击事件和对应的处理函数
    3.1 做表单的预校验 表单组件上的方法validate
    3.2 测试登录的请求
 4. 跨域-配置反向代理服务  vue.config.js文件中devServe.proxy
 5. 最终是环境变量文件中设置 VUE_APP_BASE_API = '/api'
 6. 封装登录的接口 api/user.js
 7. 优化-将登录的请求的操作定义到store/modules/user.js模块中的action里


 8. token的存储
    vuex  本地  定义对应mutation和state中数据 保证token存储
 9. 消息提示 在user模块中登录的action里返回登录的响应数据 在login组件中await接收响应的数据 判断success字段做消息提示
 10. success为true  跳转首页  

 11. 优化  在拦截器中统一处理消息提示 需要单独导入Message组件
     拦截器的代码复制过来不要删, 修改将拦截器挂载给axios实例
 12. 登录失败抛出错误的promise
 13. try catch处理按钮的禁用状态

 https://vue3js.cn/  组件库和项目
 https://vue3js.cn/interview/  面试题
-->
<!-- 第二天----------------
 1. 登录拦截(页面拦截) 路由导航守卫(路由钩子) permission.js中
 2. 进度条插件nprogress  前置守卫开启nprogress.start()  后置守卫中结束 nprogress.done()
   正常的路由切换会经过前置和后置守卫,但是被强制拦截的是不会经过后置守卫的,需要单独nprogress.done()
 3. styles/sidebar.scss中处理左侧菜单的样式 和 左侧菜单的logo (有能力的同学看一下点击汉堡按钮如何实现折叠和收起) 
 4. navbar组件样式

 下午 个人信息渲染
 5. 准备获取个人基本信息的接口(api/user.js), 配置请求头headers携带token,在navbar组件中测试了一下接口
 6. 优化 在请求拦截器中headers中统一挂载了token
 7. 将个人信息存储到vuex中
    在store/modules/user.js 定义了action+mutation+state中userInfo  navBar组件触发对应的action
 8. 挂载了全局getter name 渲染用户名称   
 9. 先获取个人信息, 再放行进入到系统首页
   将navbar获取个人信息的操作 挪到 permission文件中 导航守卫的位置中
 10. 优化 频繁切换页面 频繁获取个人信息  
 11. 准备获取带头像的接口(api/user.js), 在store/modules/user.js 获取个人信息的action 再次发送第二次请求
 获取带头像的用户信息 将两个响应的结果 合并成一个新对象 存储到vuex
 12. 定义全局的 avatar getter 渲染 
 13. 碎图处理
   main.js 定义全局的自定义指令  带值  本地图片模块加载
 -->
<!-- 第三天----------------
1. 优化-抽离了自定义指令模块  src/directives/index.js 
  1.1 直接导入并注册所有指令
  1.2 按需导出  按需注册指令
  1.3 import * as 别名  配合for in 批量注册所有指令  
2. 退出功能
   2.1 绑定点击事件 .native
   2.2 确认消息框提示
   2.3 清除vuex+cookie中token  单独在store/modules/user.js  定义mutation 
   2.4 跳转到登录页面

3.token过期失效处理 401的错误
  在utils/request.js 响应拦截器的第二个处理函数中判断 响应状态码是否是401 响应的data.code === 10002
  清除vuex+cookie中token  跳转到登录页面
4. 左侧导航路由
   1. 清除了无效的路由规则和路由对应的组件
   2. views文件夹下新建好对应路由的组件页面
   3. 分析测试如何在这个项目中配置路由规则
   4. 复制首页的路由规则 测试组织架构的路由规则
   5. 新建了router/modules/xx.js 各自的路由规则 改路径 title icon
   6. 将各自的路由规则导入到 router/index.js  拆分静态路由数组和动态路由数组 合并展示到路由规则中
   7. 高亮效果
5. 组织架构页面
  1. 左右布局 card row col dropdown组件
  2. 树形控件 data props default-expand-all
-->
<!-- 第四天----------------
1. 为树形组件使用作用域插槽定制结构  data 每一行叶子的数据对象
2. 单独抽离了 treetools组件 (做左右布局的) 挂载到父组件上
3. 使用父传子将每一行的数据传递给treetools (需要单独为第一个treetools自定义一个对象)
4. 控制编辑和删除按钮的按需显示
5. 封装获取部门列表的接口 api/department.js 在组件中获取部门列表
6. 分析梳理部门与部门的关系 一级部门的pid是 ''  二级部门的pid是一级部门的id 
7. 使用递归函数实现部门列表数据的处理 
     debugger 将vue.config.js 反向代理地址 http://192.168.19.72:3000
8. 抽离处理部门列表数据的处理函数 到 utils/index
9. 样式处理 间距  对齐方式  图标.....(鸡肋) 
10. 为三个按钮绑定事件 command方式  @click.native
11. 对话框的展示与隐藏
    1. 新建了addDepts子组件, 放置的是对话框的结构  删除.sync
    2. 将addDepts子组件挂载到departments/index.vue中
    3. 将控制对话框展示的布尔值在departments/index.vue定义 showDialog
    4. 将父组件定义的showDialog布尔值传递给 addDepts子组件 props接收
    5. addDepts修改visible对应的属性值
    6.为treetools子组件中的添加按钮发布自定义事件 通知父组件将showDialog设置为true
    7.为addDepts组件中确定 取消 x按钮 绑定事件 子传父通知父组件将showDialog设置为false
12. 拦截器直接响应了 response.data 方便组件中页面中 获取数据少.一次data
-->
<!-- 第五天----------------
 1. 绘制了表单结构
 2. 定义表单关联的字段和基本的校验规则
 3. 单独为部门名称和部门编码定义自定义校验规则  validator: 处理函数  value cb()
 4. 获取了部门负责人列表 渲染部门负责人  manager 要的是负责人的名称
 5. 新增的第五个参数 pid
 5. 添加- 
     1. 为确定按钮绑定点击事件
     2. 表单的预校验
     3. 准备新增部门的接口发送新增的请求 5个参数
     4. 通知父组件关闭对话框 重新获取部门列表
 6.删除-
     1. 为删除按钮绑定点击事件
     2. 确认消息框提示
     3. 准备删除部门的接口发送删除的请求 id
     4. 通知父组件重新获取部门列表
 7.编辑-
   1. 通知父组件展示对话框
   2. 携带了点击的部门的id
   3. 在表单组件中定义获取部门详情的方法
   4. 在父组件中通过ref+$refs获取到子组件 并调用子组件获取部门的方法 
   5. 数据的回显
   6. 拆分了确定按钮的业务  form.id 
   7. 封装编辑提交的接口 发送编辑的请求   
   8. 通知父组件关闭对话框 重新获取部门列表 
   9. bug先编辑再新增的bug  form.id
-->
<!-- 第五天---------------- 
  1. 组织架构页面处理 编辑状态下的部门名称和部门编码校验规则  在编辑状态下 form.id+当前输入框的value值和编辑的部门信息比较 nodeData
  2. 处理了对话框的title标题
  3. 设置了整页面的loading 请求拦截器+响应拦截器中 
  4. tabs组件
  5. 表格组件
  6. 获取角色列表渲染表格数据
  7. 分页组件pagination
  8. 删除角色 核心是通过表格列的作用域插槽 拿到当前行id
  9. 删除角色表格数据只剩一行的bug page--
  10. 新增:
    1. 准备对话框组件 定义对应关联的布尔值
    2. 点击新增按钮将布尔值设置为true 点击对话框的确定/取消/x 设置布尔值为false
    3. 准备表单元素 表单数据关联(接口文档 注意描述是description) 表单校验规则
    4. 为确定按钮绑定点击事件 表单的预校验, 预校验(validate)通过后 (准备新增角色的接口)携带发送新增角色的请求
    5. 新增完成后 关闭对话框 重置表单和规则(resetFields())  重新渲染
  11. 编辑: 
    1. 点击编辑按钮展示对话框将布尔值设置为true
    2. 准备查询角色详情的接口获取数据 回显到表单中
    3. 拆分确定按钮的业务逻辑 form.id
    4. 准备编辑提交的接口 携带参数发送请求  关闭对话框 重置表单和规则(resetFields())  重新渲染
    
  12. 自定义索引列  type="index" :index="indexMethod"  
  13. 渲染公司信息







-->
